<style scoped>
</style>

<template>
  <div id="window7">

      <!-- 头部：标题 -->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="14" style="text-align: right;">案件统计</el-col>
        <!--        关闭按钮-->
        <el-col :span="10" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>

      <!-- 主体 -->
      <div ref="chart" style="width: 100%; height: 350px;margin-top: 10px"></div>

        </div>

</template>

<script>
import * as echarts from 'echarts';
import {defineComponent} from "vue";
import { defineEmits } from 'vue'

const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
// 柱状图
export default defineComponent({
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.renderChart();
  },
  methods: {
    renderChart() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        legend: {
          data: ['2017年', '2018年', '同比增长']
        },
        xAxis: [
          {
            type: 'category',
            data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            //name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            //name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        grid: {
          top: 40, // 调整顶部边距
          bottom: 30, // 调整底部边距
          right: 60, // 调整右边边距，为 y 轴标签留出空间
          left: 60
        },
        series: [
          {
            name: '2017年',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '2018年',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '同比增长',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };

      this.chart.setOption(option);
    },
  },
})
</script>


